<html>
<head>
    <title>用户管理</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F2F2F2;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .table {
            border: 1px solid #ddd;
            border-collapse: collapse;
        }

        .table thead tr th,
        .table tbody tr td {
            padding: 8px 12px;
            text-align: center;
            color: #333;
            border: 1px solid #ddd;
            border-collapse: collapse;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor" style="display: none">
    <div class="page-main">
        <div class="main-head">
            <el-form :inline="true" size="small" :model="searchForm">
                <el-form-item label="名称">
                    <el-input placeholder="请输入" style="width: 150px;" v-model="drillName"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select filterable v-model="planStatus" @change="select_status">
                        <el-option
                                v-for="item in status"
                                :key="item.Id"
                                :label="item.label"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="btnSearch">查询</el-button>
                    <el-button type="success" @click="btnAdd">新增</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    :data="tableData"
                    style="width: 100%" height="600">
                <el-table-column
                        type="index"
                        width="120" label="序号">
                </el-table-column>
                <el-table-column
                        prop="drillName"
                        label="名称"
                >
                </el-table-column>
                <el-table-column prop="drillTime" label="日期">
                    <template slot-scope="scope">
                        <el-tag size="medium">{{scope.row.drillTime.replace("T"," ").substr(0,10)}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="drillPlace"
                        label="地点"
                >
                </el-table-column>
                <el-table-column
                        prop="DepartmentName"
                        label="关联部门"
                >
                </el-table-column>
                <el-table-column
                        prop="PreName"
                        label="关联应急预案"
                >
                </el-table-column>
                <el-table-column prop="file" label="下载演练脚本">
                    <template slot-scope="scope">
                        <template v-if="scope.row.file">
                            <el-link :href="webRoot + scope.row.file" type="primary" target="_blank">下载</el-link>
                        </template>
                        <template v-else>
                            <el-tag size="medium">未上传</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="planStatus" label="状态">
                    <template slot-scope="scope">
                        <template v-if="scope.row.planStatus==0">
                            <el-tag size="medium">未演练</el-tag>
                        </template>
                        <template v-if="scope.row.planStatus==1">
                            <el-tag size="medium">演练中</el-tag>
                        </template>
                        <template v-if="scope.row.planStatus==2">
                            <el-tag size="medium">已演练</el-tag>
                        </template>
                        <template v-if="scope.row.planStatus==3">
                            <el-tag size="medium">已评估</el-tag>
                        </template>
                        <template v-if="scope.row.planStatus==4">
                            <el-tag size="medium">已总结</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <!--<el-table-column-->
                <!--prop="planStatus"-->
                <!--label="状态"-->
                <!--&gt;-->
                <!--</el-table-column>-->
                <el-table-column
                        prop="name"
                        label="操作"
                        width="400"
                >
                    <template slot-scope="scope">
                        <template v-if="scope.row.forceText">
                            <el-button round size="mini"
                                       @click="implementated(scope.row)" type="info">已实施
                            </el-button>
                        </template>
                        <template v-else>
                            <el-button round size="mini"
                                       @click="implementation(scope.row)" type="info">实施
                            </el-button>
                        </template>
                        <template v-if="scope.row.assess">
                            <el-button round size="mini"
                                       @click="openAssessed(scope.row)" type="info">已评
                            </el-button>
                        </template>
                        <template v-else>
                            <el-button round size="mini"
                                       @click="openAssess(scope.row.Id)" type="info">评论
                            </el-button>
                        </template>
                        <template v-if="scope.row.summary">
                            <el-button round size="mini"
                                       @click="openSummaryed(scope.row)" type="info">已总结
                            </el-button>
                        </template>
                        <template v-else>
                            <el-button round size="mini"
                                       @click="openSummary(scope.row.Id)" type="info">总结
                            </el-button>
                        </template>
                        <el-button round size="mini"
                                   @click="handleEdit(scope.row)" type="info">编辑
                        </el-button>
                        <el-button @click="deldrillPlan(scope.row.Id)" round size="mini"
                                   type="danger">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page-footer">
                <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                               :current-page.sync="pageno" @current-change="onChangePage">
                </el-pagination>
            </div>
        </div>
    </div>

    <el-dialog title="评估" :visible.sync="assessFormVisible" :show-close="false">
        <el-form :model="Assessed">
            <el-form-item label="评估结论" :label-width="formLabelWidth">
                <el-input v-model="Assessed.assess" autocomplete="off" type="textarea"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="assessFormVisible = false">取 消</el-button>
            <el-button @click="insertAssess" type="primary">确定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="评估明细" :visible.sync="assessedFormVisible" :show-close="false">

        <el-form :model="Assessed">
            <template v-if="Assessed.assess">
                <el-form-item label="评估内容:" :label-width="formLabelWidth">
                    {{Assessed.assess}}
                </el-form-item>
                <el-form-item label="评估时间:" :label-width="formLabelWidth">
                    <templeate v-if="Assessed.assessTime">
                        {{Assessed.assessTime.replace("T"," ")}}
                    </templeate>
                </el-form-item>
            </template>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="assessedFormVisible=false" type="primary">确定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="总结" :visible.sync="summaryFormVisible" :show-close="false">
        <el-form :model="Summaryed">
            <el-form-item label="总结结论" :label-width="formLabelWidth">
                <el-input v-model="Summaryed.summary" autocomplete="off" type="textarea"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="summaryFormVisible = false">取 消</el-button>
            <el-button @click="insertSummary" type="primary">确定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="总结明细" :visible.sync="summaryedFormVisible" :show-close="false">

        <el-form :model="Summaryed">
            <template v-if="Summaryed.summary">
                <el-form-item label="总结内容:" :label-width="formLabelWidth">
                    {{Summaryed.summary}}
                </el-form-item>
                <el-form-item label="总结时间:" :label-width="formLabelWidth">
                    <templeate v-if="Summaryed.summaryTime">
                        {{Summaryed.summaryTime.replace("T"," ")}}
                    </templeate>
                </el-form-item>
            </template>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="summaryedFormVisible=false" type="primary">确定</el-button>
        </div>
    </el-dialog>
    <!--<el-dialog :visible.sync="addVisible" :show-close="false" width="55%" style="display: none">-->
    <!---->
    <!--<span slot="footer" class="dialog-footer">-->
    <!--<el-button style="text-align: center" @click="addCancel()">取消</el-button>-->
    <!--<el-button type="primary" @click="addCancel()"-->
    <!--style="text-align: center">确定</el-button>-->
    <!--</span>-->
    <!--</el-dialog>-->


    <el-dialog :title="'添加'" :visible.sync="addVisible" :show-close="false" width="55%">
        <el-row>
            <el-form :model="addForm">
                <el-form-item label="演练名称">
                    <el-input placeholder="请输入" style="width: 65%;" v-model="addForm.drillName"></el-input>
                </el-form-item>
                <el-form-item label="演练日期">
                    <el-date-picker
                            v-model="addForm.drillTime"
                            type="date"
                            placeholder="选择日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="演练地点">
                    <el-input placeholder="请输入" style="width: 65%;" v-model="addForm.drillPlace"></el-input>
                </el-form-item>
                <el-form-item label="应急预案">
                    <el-select filterable v-model="addForm.PreId" @change="select_status">
                        <el-option
                                v-for="item in PreplanList"
                                :key="item.PreId"
                                :label="item.PreName"
                                :value="item.PreId">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="关联部门">
                    <el-select v-model="addForm.DepartmentId" filterable placeholder="请选择" @change="select_status">
                        <el-option
                                v-for="item in DepartmentData"
                                :key="item.DepartmentID"
                                :label="item.DepartmentName"
                                :value="item.DepartmentID">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="演练文件">
                    <!--iot.hzcando.com-->
                    <el-upload
                            class="upload-demo"
                            drag
                            :action="url+'/api/idm/v1/EmergenceSupplies/DrillPlanAdd'"
                            :headers="headers"
                            name="file"
                            :data="addForm"
                            :on-change="fileChange"
                            :on-success="onSuccess"
                            :on-error="onError"
                            :limit="1"
                            :file-list="fileList"
                            :auto-upload="false"
                            ref="add">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                </el-form-item>
            </el-form>
        </el-row>


        <div slot="footer" class="dialog-footer">
            <el-button @click="addVisible=false">取消</el-button>
            <el-button @click="plan_submit('add')" type="primary">确定</el-button>
        </div>
    </el-dialog>


    <el-dialog :title="'编辑'" :visible.sync="editVisible" :show-close="false" width="55%">
        <el-row>
            <el-form :model="editForm">

                <el-form-item label="演练名称">
                    <el-input placeholder="请输入" style="width: 65%;" v-model="editForm.drillName"></el-input>
                </el-form-item>
                <el-form-item label="演练日期">
                    <el-date-picker
                            v-model="editForm.drillTime"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="演练地点">
                    <el-input placeholder="请输入" style="width: 65%;" v-model="editForm.drillPlace"></el-input>
                </el-form-item>
                <el-form-item label="应急预案">
                    <el-select filterable v-model="editForm.PreId" @change="select_status">
                        <el-option
                                v-for="item in PreplanList"
                                :key="item.PreId"
                                :label="item.PreName"
                                :value="item.PreId">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="关联部门">
                    <el-select v-model="editForm.DepartmentId" filterable placeholder="请选择" @change="select_status">
                        <el-option
                                v-for="item in DepartmentData"
                                :key="item.DepartmentID"
                                :label="item.DepartmentName"
                                :value="item.DepartmentID">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="演练文件">
                    <!--iot.hzcando.com-->
                    <el-upload
                            class="upload-demo"
                            drag
                            :action="url+'/api/idm/v1/EmergenceSupplies/DrillPlanUpdate'"
                            :headers="headers"
                            name="file"
                            :data="editForm"
                            :on-change="fileChange"
                            :on-success="onSuccess"
                            :on-error="onError"
                            :limit="1"
                            :file-list="fileList"
                            :auto-upload="false"
                            ref="edit">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                </el-form-item>
            </el-form>
        </el-row>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editVisible=false">取消</el-button>
            <el-button @click="plan_esubmit('edit')" type="primary">确定</el-button>
        </div>
    </el-dialog>


    <el-dialog title="实施情况" :show-close="false" width="55%" :visible.sync="implementationVisible">
        <el-form :model="force_form">
            <el-form-item label="实施小结*">
                <el-input placeholder="请输入" style="width: 65%;" v-model="force_form.forceText"></el-input>
            </el-form-item>
            <el-form-item label="实施资料*">
                <!--iot.hzcando.com-->
                <el-upload
                        class="upload-demo"
                        drag
                        :action="url+'/api/idm/v1/EmergenceSupplies/force'"
                        :headers="headers"
                        name="file"
                        :data="force_form"
                        :on-change="fileChange"
                        :on-success="onSuccess"
                        :on-error="onError"
                        :limit="1"
                        :file-list="fileList"
                        :auto-upload="false"
                        ref="force_add">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="implementationVisible=false">取消</el-button>
            <el-button @click="force_submit" type="primary">确定</el-button>
        </div>
    </el-dialog>
</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>


<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            url: SiteConfig.webApiset,
            formLabelWidth: '120px',
            PreplanList: [],
            searchForm: {},
            tableData: [],
            pagesize: 10,
            pageno: 1,
            totalCount: 10,
            addVisible: false,
            editVisible: false,
            assessedFormVisible: false,
            assessFormVisible: false,
            summaryedFormVisible: false,
            summaryFormVisible: false,
            implementationVisible: false,
            addForm: {},
            editForm: {},
            TypeContent: [],
            options: [],
            RiskData: [],
            status: [{Id: "", label: '所有'}, {Id: 0, label: '未演练'},{Id: 1, label: '演练中'}, {Id: 2, label: '已演练'}, {Id:3,label:'已评估'},{Id: 4, label: '已总结'}],
            DepartmentData: [],
            headers: {},
            planStatus: '',
            drillName: '',
            fileList: [],
            Assessed: {
                assess: '',
            },
            Summaryed: {
                summary: '',
            },
            force_form: {
                forceText: '',
                Id: "",
            },
            refs: '',
            webRoot:SiteConfig.webApiset
        },
        methods: {
            select_status() {
                this.$forceUpdate();
            },
            fileChange(file, fileList) {
                this.fileList = fileList;
            },
            onSuccess(res) {
                // if (res.state == 0) {
                this.$message({
                    message: '保存成功！',
                    type: 'success'
                });

                this.$refs[this.refs].clearFiles();
                this.fileList = [];
                this.addVisible = false;
                this.editVisible = false;
                this.implementationVisible = false;
                this.addForm = {};
                this.editForm = {};
                this.getDrill();
                // } else {
                //     this.$message({
                //         type: 'error',
                //         message: '报错!' + res.errMsg
                //     });
                // }

            },
            onError(err) {
                this.$message({
                    type: 'error',
                    message: '报错!' + err.errMsg
                });
            },
            implementation(row) {
                this.implementationVisible = true;
                this.force_form.Id = row.Id;
            },
            force_submit() {
                if (this.fileList.length == 0 || !this.force_form.forceText) {
                    this.$message.warning('内容不能为空');
                    return;
                } else {
                    this.refs = 'force_add';
                    this.$refs.force_add.submit();
                }
            },
            insertSummary: function () {
                HttpUtil.get('EmergenceSupplies/summary', this.Summaryed).success((r) => {
                    if (r.state == 0) {
                        vuePage.$message({
                            type: 'success',
                            message: '总结成功!'
                        });
                        this.summaryFormVisible = false;
                        vuePage.getDrill();
                    } else {
                        vuePage.$message.error('总结失败!');
                    }
                })
            },
            insertAssess: function () {
                HttpUtil.get('EmergenceSupplies/assess', this.Assessed).success((r) => {
                    if (r.state == 0) {
                        vuePage.$message({
                            type: 'success',
                            message: '评估成功!'
                        });
                        this.assessFormVisible = false;
                        vuePage.getDrill();
                    } else {
                        vuePage.$message.error('评估失败!');
                    }
                })
            },
            openAssess: function (id) {
                this.assessFormVisible = true;
                this.Assessed.Id = id;
            },
            openAssessed: function (row) {
                this.assessedFormVisible = true;
                this.Assessed.assess = row.assess;
                this.Assessed.assessTime = row.assessTime;
            },
            openSummary: function (id) {
                this.summaryFormVisible = true;
                this.Summaryed.Id = id;
            },
            openSummaryed: function (row) {
                this.summaryedFormVisible = true;
                this.Summaryed.summary = row.summary;
                this.Summaryed.summaryTime = row.summaryTime;
            },
            deldrillPlan(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    HttpUtil.get('EmergenceSupplies/DrillPlanDelete', {Id: id}).success((r) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getDrill();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleEdit(row) {
                this.refs = 'edit';
                this.editForm = Object.assign({}, row);
                // this.editForm = row;
                // this.editForm.DepartmentId = parseInt(row.DepartmentId);
                // this.editForm.drillTime = row.drillTime;
                // this.editForm.drillName = row.drillName;
                // this.editForm.drillPlace = row.drillPlace;
                // this.editForm.PreId = row.PreId.toString();
                this.editVisible = true;
                this.editMod = true;
            },
            report: function (filename) {
                window.open(SiteConfig.webApiset + filename);
            },
            getDrill() {
                var param = {};

                    param.drillName = this.drillName;

                    param.planStatus = this.planStatus;
                param.projectNo = SiteConfig.account.projectNo;
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                HttpUtil.get('EmergenceSupplies/DrillPlanList', param).success((res) => {
                    this.tableData = res.data;
                    this.totalCount = res.total;

                })
            },
            plan_submit(name) {
                this.refs = 'add'
                if (!this.addForm.drillName) {
                    this.$message.warning('请输入演练名称');
                    return;
                }
                if (!this.addForm.drillTime) {
                    this.$message.warning('请输入演练日期');
                    return;
                }

                if (!this.addForm.drillPlace) {
                    this.$message.warning('请输入演练地点');
                    return;
                }
                if (!this.addForm.PreId) {
                    this.$message.warning('请输入预案');
                    return;
                }
                if (!this.addForm.DepartmentId) {
                    this.$message.warning('请输入部门');
                    return;
                }
                if (this.fileList.length == 0) {
                    this.$message({
                        type: 'info',
                        message: '必须选择文件'
                    });
                    return;
                }
                this.addForm.projectNo = SiteConfig.account.projectNo;
                if (this.fileList.length == 0) {
                    HttpUtil.post('EmergenceSupplies/DrillPlanAdd', this.addForm).success((r) => {
                        this.$message({
                            message: '添加成功！',
                            type: 'success'
                        });
                        this.fileList = [];
                        this.addVisible = false;
                        this.getDrill();
                    })
                } else {
                    // this.$refs[name].submit();

                    this.$refs[name].submit();
                    this.addVisible = false;

                }


            },
            plan_esubmit(name) {

                if (!this.editForm.drillName) {
                    this.$message.warning('请输入演练名称');
                    return;
                }
                if (!this.editForm.drillTime) {
                    this.$message.warning('请输入演练日期');
                    return;
                }

                if (!this.editForm.drillPlace) {
                    this.$message.warning('请输入演练地点');
                    return;
                }
                if (!this.editForm.PreId) {
                    this.$message.warning('请输入预案');
                    return;
                }
                if (!this.editForm.DepartmentId) {
                    this.$message.warning('请输入部门');
                    return;
                }

                if (this.fileList.length == 0) {
                    HttpUtil.post('EmergenceSupplies/DrillPlanUpdate', this.editForm).success((r) => {
                        this.$message({
                            message: '修改成功！',
                            type: 'success'
                        });
                        this.fileList = [];
                        this.editVisible = false;
                        this.getDrill();
                    })
                } else {
                    this.$refs[name].submit();
                }
                // this.$refs[name].submit();
                // this.editVisible = false;
                // this.$message({
                //     message: '修改成功！',
                //     type: 'success'
                // });
                // this.getDrill();
            },
            getPreplan() {
                var param = {};
                param.projectNo = SiteConfig.account.projectNo;
                param.pageno = 1;
                param.pagesize = 1000;
                HttpUtil.get('ContingencyPreplan/PreplanList', param).success((res) => {
                    this.PreplanList = res.data;
                    this.$forceUpdate();
                })
            },
            btnSearch() {
                this.getDrill();
            },
            addCancel() {
                this.refs = 'add';
                this.addVisible = false;
                this.addForm = {};
            },
            btnAdd() {
                this.addVisible = true;
            },
            delTypeContent(index) {
                this.TypeContent.splice(index, 1);
            },
            addTypeContent() {
                this.TypeContent.push({content: ''});
            },
            onChangePage(page) {
                this.pageno = page;
                this.getDrill();
            }
        },
        created: function () {
            $('.page').show();
            let proNo = HttpUtil.getQueryString('projectNo');
            if (proNo) SiteConfig.account.projectNo = proNo;
            let id = HttpUtil.getQueryString('id');
            if (proNo) SiteConfig.account.id = id;
        },
        mounted: function () {
            this.getDrill();
            this.getPreplan();
            this.headers = {
                uid: SiteConfig.account.uId,
                token: SiteConfig.account.accessToken
            }


            HttpUtil.get('Department/List', {projectNo: SiteConfig.account.projectNo}).success((r) => {
                if (r.state == 0) {
                    this.DepartmentData = r.data;
                }
            })
        }
    });


</script>

</body>
</html>
